<template>
	<view class="follow">
		<view class="follow__list" v-for="item in followUserList" :key="item.FollowPxid">
			<view class="follow__list--left" @click="goHomePage(item)">
				<n-avator width="80" height="80" circle :name="item.FollowUser" :avator="item.avator"></n-avator>
				<view class="follow__list--left-name">
					<text class="follow__list--left-name-text">{{item.FollowUser}}</text>
				</view>
			</view>
			<view class="follow__list--right" v-show="item.IsSelf == '0'">
				<u-button type="primary" plain text="已关注" color="#aaa" :customStyle="{height: '60rpx',padding: '0 10rpx'}" @click="clickBtn(item)" v-if="item.IsFollow == '1'"></u-button>
				<u-button type="primary" plain text="+ 关注" color="#2979ff" :customStyle="{height: '60rpx',padding: '0 10rpx'}" @click="clickBtn(item)" v-else></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import nAvator from '@/components/custom/avator/n-avator.nvue';
	
	export default {
		components: {
			nAvator
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				followUserList: [],
				data: {},
				type: 'follow',//follow：关注列表，beFollow：粉丝列表
			}
		},
		onLoad(options) {
			this.data = options.data ? JSON.parse(options.data) : {};
			this.type = options.type;
			let title = '';
			switch(this.type) {
				case 'follow':
					title = '关注'
					this.getSubjectFollowUserList();
					break
				case 'beFollow':
					title = '粉丝'
					this.getSubjectBeFollowUserList();
					break
			}
			uni.setNavigationBarTitle({
				title
			});
		},
		methods: {
			/**
			 * 获取社区关注用户列表
			 */
			getSubjectFollowUserList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectFollowUserList',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						followpxid: this.data.pxid
					},
					success(res) {
						res.forEach(item => {
							item.avator = that.static_avator + "/static/photo/user/" + item.FollowPxid + "/70.jpg";
						})
						that.followUserList = res;
					},
					fail() {
						uni.showToast({
							title: '获取关注用户失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 获取用户粉丝列表
			 */
			getSubjectBeFollowUserList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectBeFollowUserList',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						followpxid: this.data.pxid
					},
					success(res) {
						res.forEach(item => {
							item.avator = that.static_avator + "/static/photo/user/" + item.FollowPxid + "/70.jpg";
						})
						that.followUserList = res;
					},
					fail() {
						uni.showToast({
							title: '获取关注用户失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 取消关注
			 * @param {Object} v1
			 * @param {Object} v2
			 */
			delSubjectFollow(v1,v2) {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'delSubjectFollow',
						code: 2,
						apiparam: {
							createuser: this.obsusername,
							createpxid: this.pxid,
							followuser: v1,
							followpxid: v2,
						},
						success(res) {
							uni.showToast({
								title: '取消关注成功',
								icon: 'none'
							})
							resolve()
						},
						fail() {
							uni.showToast({
								title: '取消关注失败',
								icon: 'none'
							})
						}
					})
				})
			},
			/**
			 * 添加关注
			 */
			addSubjectFollow(v1,v2) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addSubjectFollow',
						code: 3,
						apiparam: {
							createuser: this.obsusername,
							createpxid: this.pxid,
							followuser: v1,
							followpxid: v2
						},
						success(res) {
							uni.showToast({
								title: '关注成功',
								icon: 'none'
							})
							resolve()
						},
						fail() {
							uni.showToast({
								title: '关注失败',
								icon: 'none'
							})
						}
					})
				})
			},
			clickBtn(v) {
				let that = this;
				if(v.IsFollow == '1') {
					uni.showModal({
						title: '提示',
						content: '确认要取消关注吗？',
						success(res) {
							if(res.confirm) {
								that.delSubjectFollow(v.FollowUser,v.FollowPxid).then(() => {
									that.$set(v,'IsFollow','0');
								})
								uni.$emit('follow-refresh');
							}
						}
					})
				} else {
					this.addSubjectFollow(v.FollowUser,v.FollowPxid).then(() => {
						that.$set(v,'IsFollow','1');
					})
				}
			},
			/**
			 * 跳转到主页
			 * @param {Object} e
			 */
			goHomePage(v) {
				let data = {
					name: v.FollowUser,
					pxid: v.FollowPxid,
					avator: v.avator,
				}
				uni.navigateTo({
					url: './homepage?data=' + JSON.stringify(data)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.follow {
		
		&__list {
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			&--left {
				display: flex;
				align-items: center;
				
				&-name {
					margin-left: 20rpx;
					
					&-text {
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>
